<template>
  <div class="outBox">
    <el-card style="border-radius:10px;padding-left:100px">
      <el-form ref="deptForm" :model="formData" :rules="rules" :inline="true" class="formBox">

        <el-form-item v-for="(item,index) in formLabelList" :key="index" :prop="item.data">
          <div>{{ label=item.label }}</div>
          <el-input v-if="item.type==='input'" v-model="formData[item.data]" :disabled="item.disabled==='true'" :maxlength="item.maxlength" clearable round placeholder="请输入" :class="item.class||'inputStyle'" />

          <el-select v-else-if="item.type==='select' && item.label==='仓库类型'" v-model="formData[item.data]" round placeholder="请输入" :class="item.class||'inputStyle'">
            <el-option
              v-for="(item,index) in stutaList"
              :key="index"
              :label="item.name"
              :value="item.val"
            /></el-select>

          <el-cascader v-else-if="item.type==='cascader' && item.label==='省/市/区'" v-model="formData[item.data]" clearable size="large" :options="options" :class="item.class||'inputStyle'" placeholder="请选择省市区" @change="handleChange" />

          <el-radio-group v-else-if="item.type==='radio' && item.label==='仓库状态'" v-model="formData[item.data]" :class="item.class||'inputStyle'">
            <el-radio :label="0">停用</el-radio>
            <el-radio :label="1">启用</el-radio>
          </el-radio-group>

          <el-input v-else-if="item.label==='仓库面积'" v-model="formData[item.data]" oninput="value=value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')" clearable round placeholder="请输入" :class="item.class||'inputStyle'">
            <template slot="append">m³</template>
          </el-input>

        </el-form-item>
      </el-form>
      <div class="footerBtn">
        <el-button class="Btn leftBtn" round @click="backFn">返回</el-button>
        <el-button class="Btn rightBtn" round @click="submitFn">提交</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
import { changeWarehouse, addWarehouse } from '@/api'
export default {
  data() {
    return {
      formLabelList: JSON.parse(localStorage.getItem('formLabelList')) || this.$route.params.formLabelList,
      options: regionData, // 选择格式
      provinces: [], // 省市区绑定数组
      stutaList: [
        { val: 'ZZ', name: '中转仓' },
        { val: 'JG', name: '加工仓' },
        { val: 'CB', name: '储备仓' },
        { val: 'LC', name: '冷藏仓' }
      ],
      Ddata: {},
      formData: {
        code: '',
        name: '',
        type: '',
        location: '',
        address: '',
        surface: '',
        personName: '',
        phone: '',
        status: ''
      },
      location: '',
      rules: JSON.parse(localStorage.getItem('rules')) || this.$route.params.rules

    }
  },
  watch: {
    formData() {
      localStorage.setItem('item', JSON.stringify(this.formData))
    }
  },
  async created() {
    this.formData = JSON.parse(localStorage.getItem('item')) || this.$route.params.row
    if (this.formData.status) {
      this.formData.status = Number(this.formData.status)
    }
    if (typeof this.formData.location === 'string') {
      console.log(111111111111111)
      this.addCode(this.formData.location)
    }
    localStorage.setItem('rules', JSON.stringify(this.rules))
    localStorage.setItem('formLabelList', JSON.stringify(this.formLabelList))
    this.rules.phone = { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trggier: ['change'] }
  },
  methods: {
    backFn() {
      this.$router.go(-1)
      localStorage.removeItem('item')
    },
    async submitFn() {
      this.$refs.deptForm.validate(async valid => {
        if (!valid) return
        try {
          if (this.location) {
            this.formData.location = this.location
          }
          if (this.$route.params.id !== 'null') {
            await changeWarehouse(this.formData)
          } else {
            (
              await addWarehouse(this.formData)
            )
          }
          this.$router.go(-1)
          localStorage.removeItem('item')
          this.$message.success(`${this.$route.params.name}成功`)
        } catch (err) {
          console.log(err)
        }
      })
    },
    handleChange(value) {
    // value是省市区类似id 返回数组 [110000,110100,110101]，可以当发到后端存储，回显数据
      // 汉字
      this.formData.province = value[0]
      this.formData.area = value[2]
      this.formData.city = value[1]
      if (value[1] != null && value[2] != null) {
        var dz =
          CodeToText[value[0]] +
          '/' +
          CodeToText[value[1]] +
          '/' +
          CodeToText[value[2]]
      } else {
        if (value[1] != null) {
          dz = CodeToText[value[0]] + '/' + CodeToText[value[1]]
        } else {
          dz = CodeToText[value[0]]
        }
      }
      console.log(dz)
      this.location = dz
    },
    addCode(value) {
      let one = {}
      let tow = {}
      let three = {}

      if (value) {
        value = value.split('/')
      } else {
        return
      }

      // value是省市区类似id 返回数组 [110000,110100,110101]，可以当发到后端存储，回显数据
      // 汉字
      if (value[1] != null && value[2] != null) {
        one = TextToCode[value[0]]
        tow = one[value[1]]
        three = tow[value[2]]
        var dz =
          one.code +
          '/' +
          tow.code +
          '/' +
          three.code
      } else {
        if (value[1] != null) {
          dz = TextToCode[value[0]] + '/' + TextToCode[value[1]]
        } else {
          dz = TextToCode[value[0]]
        }
      }
      if (dz) {
        console.log(dz.split('/'))
        this.formData.location = dz.split('/')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.outBox{
  padding: 40px 50px;

}
.formItemBox{
  width: 100%;
  padding-right: 30px ;
}
.inputStyle{
  margin: 0 10px;
  width: 500px;
}
.formBox{
  display: flex;
  flex-wrap: wrap;
}
.inputStyleBl{
  margin: 0 10px;
  width: 1030px;
}
.footerBtn{
  margin: 50px 0 20px 0 ;
  text-align: center;
}
::v-deep .el-radio__inner{
width: 20px;
height: 20px;
}
::v-deep .el-radio__label{
font-size: 18px;
}
::v-deep .el-input__inner{
  height: 50px;
   background: #f8f5f5;
  border: 1px solid #f8f5f5;
}
.LeftBtn{
  background:#f8f5f5;
  border:none
}
.rightBtn{
  margin-left:200px;
  background:#ffb200
}
 .Btn{
  color: black;
  width: 200px;
  height: 60px;
  font-size: 18px;
}
::v-deep .el-input-group__append, .el-input-group__prepend{
  background: #e7dfdf;
}
</style>
